<template>
  <div>
    <el-select
      v-model="value1[index]"
      @change="((val)=>{cascaderFun(options, index,val)})"
      placeholder="请选择"
      v-for="(options,index) in cascader"
      :key="'l'+index"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value"></el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: [],
      cascader: [],
      deep: 0
    };
  },
  props: ["data", "exist"],
  mounted() {
    this.getDeep([this.data]);

    this.value1 = this.exist;
    let a = this.data;
    let c = 0;
    let t = true;
    while (c < this.deep) {
      if (a.children) {
        if (t) {
          this.cascader.push(a.children);
          if (this.exist[c] != "" && this.exist[c] != undefined) {
            if (
              a.children.filter(el => el.value == this.exist[c]).length == 0
            ) {
              a = a.children[0];
              this.value1[c] = "";
            } else {
              a = a.children.filter(el => el.value == this.exist[c])[0];
            }
          } else {
            a = a.children[0];
            this.value1.push("");
            t = false;
          }
        } else {
          this.cascader.push([]);
          this.value1.push("");
          a = a.children[0];
        }
      } else {
        this.cascader.push([]);
        if (this.value1[c]) {
          this.value1[c] = "";
        } else {
          this.value1.push("");
        }
      }
      c++;
    }
    this.$emit("outputValue", this.value1);
  },
  methods: {
    cascaderFun(value, index, v) {
      let a=value.filter(el => el.value == v)[0].children
      if (a) {
        this.cascader[index + 1] = a;
      }
      // this.$emit("outputValue", this.value1);
    },
    getDeep(jsonData) {
      for (var i in jsonData) {
        if (jsonData[i].children && jsonData[i].children.length > 0) {
          this.getDeep(jsonData[i].children);
          this.deep++;
        }
      }
    }
  }
};
</script>

<style>
</style>